import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment'
import { Calendar } from 'react-date-range';
import './DatePicker.less';

moment.locale("zh-cn");

class MyDatePicker extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'DatePicker';
        this.state = {
            show:false,
            date:"年-月-日"
        }
    }
    //选择时间
    handleSelect(date){
        // console.log(date); // Momentjs object
        var date = moment(date)
        this.setState({
            date:date.format('l')
        })
        this.props.onChange(date.format('l'))
    }
    //清空时间
    clear(e){
      this.setState({
          date:"年-月-日",
      })
      if (e && e.stopPropagation){
        e.stopPropagation()
      }else{
        window.event.cancelBubble=true
      }
      this.props.onChange("")
    }
    // blur操作
    toggleUp(){
      this.setState({
        show:false
      })
    }
    // focus操作
    toggleDown(){
      this.setState({
        show:true
      })
    }
    toggle(){
      this.setState({
        show:!this.state.show
      })
    }
    // 强制button的focus
    handleMouseDown(e){
      e.preventDefault()// blur在mousedown之后触发，阻止它即可
      ReactDOM.findDOMNode(this.refs.dateButton).focus()
    }
    //设置值
    setDate(value){
      this.setState({
        date:value
      })
    }
    render() {
        return <div className="tederen-DatePicker">
            <button className="text-container" ref="dateButton" onClick={this.toggle.bind(this)} onBlur={this.toggleUp.bind(this)}>
                <span>{this.state.date}</span>
                {/*<span className="ion-close-circled" onClick={this.clear.bind(this)}></span>*/}
                {/*<span className="ion-android-arrow-dropdown" style={this.state.show?{transform: "rotateX(180deg)"}:{}}></span>*/}
            </button>
            {this.state.show?<div className="date-container" onMouseDown={this.handleMouseDown.bind(this)}>
                <Calendar
                // onInit={this.handleSelect}
                onChange={this.handleSelect.bind(this)}
                // lang="cn"
                theme={{
                  Calendar     : {
                    background   : '#ffffff',
                    boxShadow    : '0 2px 4px rgba(0, 0, 0, 0.4)'
                  },
                  MonthAndYear   : {
                    background   : '#fff',
                    color        : '#444'
                  },
                  MonthButton    : {
                    background   : '#4990E2'
                  },
                  MonthArrowPrev : {
                    borderRightColor : '#B8EAE5',
                  },
                  MonthArrowNext : {
                    borderLeftColor : '#B8EAE5',
                  },
                  Weekday        : {
                    background   : '#fff',
                    color        : '#4990E2'
                  },
                  Day            : {
                    transition   : 'transform .1s ease, box-shadow .1s ease, background .1s ease'
                  },
                  DaySelected    : {
                    background   : '#4990E2'
                  },
                  DayActive    : {
                    background   : '#4990E2',
                    boxShadow    : 'none'
                  },
                  DayInRange     : {
                    background   : '#6EB1FF',
                    color        : '#fff'
                  },
                  DayHover       : {
                    background   : '#ffffff',
                    color        : '#7f8c8d',
                    // transform    : 'scale(1.1) translateY(-10%)',
                    // boxShadow    : '0 2px 4px rgba(0, 0, 0, 0.4)'
                  }
                }}
            /></div>:null}
        </div>
    }
}

export default MyDatePicker